<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="js/number.js"></script>
		<script>
			window.onload=function(){
			var canvas = document.getElementById("canvas");
			var cxt = canvas.getContext("2d");
			canvas.width = 550;
			canvas.height = 400;
			var r = 5;
		var ball={x:300,y:100,r:10,g:2,vx:-4,vy:0,color:"#ff0066"};	
 
            window.setInterval(function(){
				cxt.clearRect(0,0,canvas.width,canvas.height);
				var today = new Date();
				var h = today.getHours();
				var m = today.getMinutes();
				var s = today.getSeconds();
				var s10=Math.floor(s/10);
				var s1=Math.floor(s%10);
				
				switch(s1){
					case 0:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_zero[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 1:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_one[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 2:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_two[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 3:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_three[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 4:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_four[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 5:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_five[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 6:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_six[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 7:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_seven[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 8:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_eight[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 9:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_nine[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(70+50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
				}
				
				
				switch(s10){
					case 0:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_zero[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 1:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_one[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 2:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_two[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 3:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_three[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 4:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_four[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 5:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_five[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 6:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_six[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 7:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_seven[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 8:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_eight[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
					case 9:
					
					for (i = 0; i < 10; i++) {
						for (j = 0; j < 7; j++) {
							if (number_nine[i][j] == 1) {
								cxt.beginPath();
								cxt.fillStyle = "blue";
								cxt.arc(50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
								cxt.fill();
								cxt.closePath();
							}
						}
					}
					break;
				}
				
				
				          
					drawball();
					update();
				          
			
				console.log(s10);
				console.log(s1);
				
			},50)

          function drawball(){
          //	cxt.clearRect(0,0,canvas.width,canvas.height);
          	cxt.fillStyle=ball.color;
          	cxt.beginPath();
          	cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
          	cxt.fill();
          	cxt.closePath();
          }
          function update(){
          	ball.x+=ball.vx;
          	ball.y+=ball.vy;
          	ball.vy+=ball.g;
          	if(ball.y>400-2*ball.r){
          		ball.vy=-ball.vy*0.6;
          	}
          }

		}
		</script>
	</body>
</html>
